第十章笔记

(1)DOM

这一章主要针对不同浏览器要使用功能时做出的检测是否支持这个功能的一章。
没啥意思。

(2)Document类型

JavaScript 通过 Document 类型表示文档。在浏览器中，document 对象是 HTMLDocument（继承
自 Document 类型）的一个实例，表示整个 HTML 页面。而且，document 对象是 window 对象的一个
属性，因此可以将其作为全局对象来访问。
通过它可以访问到文档各种信息。

//取得完整的 URL
 var url = document.URL;
 //取得域名
 var domain = document.domain;
 //取得来源页面的 URL
 var referrer = document.referrer;

(3)文档写入

如果想要documen.write来写入我们需要插入到界面的JavaScript代码可以这样。

<script type="text/javascript">
document.write("<script type=\"text/javascript\"   src=\"file.js\" >" +"<\/script>"); 
</script>

(4)node遍历

不过，如果想要遍历元素的特性，attributes 属性倒是可以派上用场。在需要将 DOM 结构序列
化为 XML 或 HTML 字符串时，多数都会涉及遍历元素特性。以下代码展示了如何迭代元素的每一个特
性，然后将它们构造成 name=”value” name=”value”这样的字符串格式
。

function outputAttributes(element){
 var pairs = new Array(),
 attrName,
 attrValue,
 i,
 len;
 for (i=0, len=element.attributes.length; i < len; i++){
 attrName = element.attributes[i].nodeName;
 attrValue = element.attributes[i].nodeValue;
 pairs.push(attrName + "=\"" + attrValue + "\"");
 }
 return pairs.join(" ");
}

(5)遍历元素子节点

<html>

<body>
    <ul id="myList">
        <li>jlk</li>
        <li>jlksdjflk</li>
    </ul>
    <script>
        var mylist = document.getElementById("myList");

        for (var i = 0, len = mylist.childNodes.length; i < len; i++) {
            if (mylist.childNodes[i].nodeType == 1) {
                alert(mylist.childNodes[i].nodeName);//LI
            }
        }
    </script>
</body>

</html>

(6)用js代码实现加载js和css文件

比如在同级目录下有一个demo.js文件，我们不想用标签引用，只想用代码引入。我们可以

function loadScript(url){
       var script=document.createElement("script");
       script.type="text/javascript";
       script.src=url;
       document.body.appendChild(script);
   }
   loadScript("demo.js");

    /*需要注意的是，必须将<link>元素添加到<head>
    而不是<body>元素，才能保证在所有浏览器中的行为一致。整个过程可以用以下函数来表示：*/
    function loadStyles(url){
     var link = document.createElement("link");
     link.rel = "stylesheet";
     link.type = "text/css";
     link.href = url;
     var head = document.getElementsByTagName("head")[0];
     head.appendChild(link);
    }
    调用 loadStyles()函数的代码如下所示：
    loadStyles("styles.css");

(7)小结

  DOM 是语言中立的 API，用于访问和操作 HTML 和 XML 文档。DOM1 级将 HTML 和 XML 文档
形象地看作一个层次化的节点树，可以使用 JavaScript 来操作这个节点树，进而改变底层文档的外观和
结构。
  DOM 由各种节点构成，简要总结如下。
1 最基本的节点类型是 Node，用于抽象地表示文档中一个独立的部分；所有其他类型都继承自
Node。
2 Document 类型表示整个文档，是一组分层节点的根节点。在 JavaScript 中，document 对象是
Document 的一个实例。使用 document 对象，有很多种方式可以查询和取得节点。
3 Element 节点表示文档中的所有 HTML 或 XML 元素，可以用来操作这些元素的内容和特性。
4 另外还有一些节点类型，分别表示文本内容、注释、文档类型、CDATA 区域和文档片段。
访问 DOM 的操作在多数情况下都很直观，不过在处理<script>和<style>元素时还是存在一些
复杂性。由于这两个元素分别包含脚本和样式信息，因此浏览器通常会将它们与其他元素区别对待。这
些区别导致了在针对这些元素使用 innerHTML 时，以及在创建新元素时的一些问题。
理解 DOM 的关键，就是理解 DOM 对性能的影响。DOM 操作往往是 JavaScript 程序中开销最大的
部分，而因访问 NodeList 导致的问题为最多。NodeList 对象都是“动态的”，这就意味着每次访问
NodeList 对象，都会运行一次查询。有鉴于此，最好的办法就是尽量减少 DOM 操作。